<template>
	<view class="container">
		<uni-notice-bar style="margin-bottom: 0px;" :speed="10" background-color='#ccc' color='#ffffff'
			moreColor='#ffffff' showIcon scrollable single show-get-more :text="AdString" @getmore="getMore">
		</uni-notice-bar>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="base" type='info' title='公告' :content="AdString" @confirm="confirm"
				confirmText='我知道了'></uni-popup-dialog>
		</uni-popup>
		<swiper class="my-swiper" :indicator-dots="true" :autoplay="true" circular :interval="3000" :duration="1000"
			indicator-color="#fff" indicator-active-color="#8d2e2c">
			<swiper-item v-for="item in swiperList" :key="item.id">
				<image :src="item.src" mode="aspectFill" @error="loadError(item.id)">
				</image>
			</swiper-item>
		</swiper>

		<view class="menu">
			<view class="item" hover-class="item-hover" v-for="(item, index) in menuList" :key="item.id"
				@click="goto(item)">
				<image :src="item.iconPath"></image>
				<text>{{item.title}}</text>
			</view>
		</view>
		<!-- 文章列表 -->
		<view v-for="article in articleList" :key="article.id" @click="toDetail(article)" class="my-card">
			<view class="left">
				<image :src="article.imgurl" mode="aspectFill"></image>
			</view>
			<view class="right">
				<text class="title">{{article.title}}</text>
				<view class="content">
					<slot name="content">{{article.keypoint}}</slot>
				</view>
				<view class="foot">
					<slot name="foot">{{ article.desc}}</slot>
				</view>
			</view>
		</view>

		<uni-load-more :status="loadStatus" @clickLoadMore="loadNext" />
	</view>

</template>

<script>
	import {
		menuList,
		articleList,
		swiperList
	} from '../index/datalist.js'
	export default {
		data() {
			return {
				loadStatus: 'more',
				mode: 'round',
				// 菜单列表
				AdString: '公告',
				menuList: menuList,
				swiperList: swiperList,
				articleList: articleList

			}
		},
		onLoad: function() {},

		methods: {
			// 查看详情
			toDetail(article) {
				uni.navigateTo({
					url: '/pages/tabbar/index/detail/detail?item=' + encodeURIComponent(JSON.stringify(article)),
				});
			},
			// 查看公告
			getMore() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			confirm(value) {
				this.$refs.popup.close()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.my-card {
		display: flex;
		// height: 300rpx;
		background-color: #fff;
		box-shadow: 6upx 6upx 8upx rgba(114, 130, 138, 0.2);
		margin: 40rpx 20rpx 0;
		border-radius: 15rpx;

		.left {
			width: 30%;

			image {
				width: 100%;
				height: 100%;
				border-top-left-radius: 30rpx;
				border-bottom-left-radius: 30rpx;
			}

			.top-image {
				border-radius: 10rpx;
				transform: translateY(-30rpx);
			}
		}

		.top-left {
			padding-left: 20rpx;
		}

		.right {
			width: 70%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 20rpx 30rpx;

			.title {
				font-weight: bold;
				font-size: 40rpx;
			}

			.content {
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				color: #949494;
				font-size: 32rpx;
			}

			.foot {
				text-align: right;
				color: #949494;
				font-size: 28rpx;
			}
		}
	}
</style>
<style lang="scss" scoped>
	.container {
		padding-bottom: 40rpx;
	}

	.my-swiper {
		height: 430rpx;

		swiper-item,
		image {
			width: 100%;
			height: 100%;
			// border-radius: 10rpx;
		}

	}

	.menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		box-sizing: border-box;

		.item {
			box-sizing: border-box;
			width: 25%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;

			image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
			}

			text {
				font-size: 20rpx;
				margin: 10rpx;
				text-align: center;
				white-space: nowrap;
			}
		}

		.item-hover {
			background-color: #f2f2f2;
		}
	}
</style>